<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>充值记录</title>
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../css/bui.css" />
</head>
<body>
<div class="bui-page page-form">
    <header class="bui-bar">
        <div class="bui-bar-left"> <a class="bui-btn btn-back" href="./my.html"><i class="icon-back"></i></a> </div>
        <div class="bui-bar-main">充值记录</div>
        <div class="bui-bar-right"> </div>
    </header>
<main>
    <ul class="bui-list">
        <div id="listview" class="bui-scroll">
            <div class="bui-scroll-head"></div>
            <div class="bui-scroll-main">
                <ul class="bui-list bui-list-thumbnail">

                </ul>
            </div>
            <div class="bui-scroll-foot"></div>
        </div>
    </ul>
<!--    <ul class="bui-listview">-->
<!--        <div id="listview" class="bui-scroll">-->
<!--        </div>-->
<!--&lt;!&ndash;        <li class="bui-btn bui-box">&ndash;&gt;-->
<!--&lt;!&ndash;            <div class="span1">&ndash;&gt;-->
<!--&lt;!&ndash;                <h3 class="item-title">2018-02-02 15:04</h3>&ndash;&gt;-->
<!--&lt;!&ndash;                <p class="item-text"><span class="bui-label">充值金额</span><span class="bui-value">￥9888</span</p>&ndash;&gt;-->
<!--&lt;!&ndash;                <p class="item-text"><span class="bui-label">状态</span><span class="bui-value">成功</span></p>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--&lt;!&ndash;        </li>&ndash;&gt;-->
<!--&lt;!&ndash;        <li class="bui-btn bui-box">&ndash;&gt;-->
<!--&lt;!&ndash;            <div class="span1">&ndash;&gt;-->
<!--&lt;!&ndash;                <h3 class="item-title">2018-02-02 15:04</h3>&ndash;&gt;-->
<!--&lt;!&ndash;                <p class="item-text"><span class="bui-label">充值金额</span><span class="bui-value">￥9888</span</p>&ndash;&gt;-->
<!--&lt;!&ndash;                <p class="item-text"><span class="bui-label">状态</span><span class="bui-value">成功</span></p>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--&lt;!&ndash;        </li>&ndash;&gt;-->
<!--    </ul>-->
</main>
</div>
    <!-- 依赖库 手机调试的js引用顺序如下 -->
    <script src="../js/zepto.js"></script>
    <script src="../js/plugins/fastclick.js"></script>
    <script src="../js/bui.js"></script>
    <script src="../js/common.js"></script>
    <script>
        bui.ready(function () {
            // 这里写业务及控件初始化

            initCommon(bui);

            bui.btn({id: ".bui-page", handle: ".bui-btn"}).load();

            var yhbm = $$("yhbm");
            var storage = bui.storage();

            bui.list({
                id: "listview",
                url: BASE_URL+"/front/paylist",
                pageSize: 10,
                data: {yhbm:yhbm},
                field: {
                    page: "page",
                    size: "pageSize",
                    data: "data"
                },
                callback: function(e) {
                    // e.target 为你当前点击的元素
                    // e.currentTarget 为你当前点击的handle 整行
                },
                template: function(data) {
                    var html = "";
                    data.forEach(function(el, index) {
                        var zt = el.status;
                        var status = "未发起";
                        var color = "black";
                        if(zt == 0){
                            status = "未发起";
                        }else if(zt == 1){
                            status = "付款成功";
                            color = "green";
                        }else if(zt == 2){
                            status = "分账成功";
                            color = "green";
                        }else if(zt == -1){
                            status = "分账失败";
                            color = "red";
                        }else if(zt == -2){
                            status = "付款失败";
                            color = "red";
                        }

                        el.rechartmoney = el.rechartmoney/100;
                        // html += ` <li class="bui-btn bui-box">
                        //     <div class="span1">
                        //         <h3 class="item-title">${el.rechardtime}</h3>
                        //         <p class="item-text"><span class="bui-label">充值金额</span><span class="bui-value">￥${el.rechartmoney}</span></p>
                        //         <p class="item-text"><span class="bui-label">状态</span><span class="bui-value" style="color: ${color}">
                        //                 ${status}
                        //         </span></p>
                        //     </div>
                        // </li>`;

                        html += ` <li class="bui-btn bui-box">
                            <div class="span1">
                                <h3 class="item-title">${el.rechardtime}</h3>
                                <p class="item-text"><span class="bui-label">充值金额</span><span class="bui-value">￥${el.rechartmoney}</span></p>
                            </div>
                        </li>`;

                    });

                    return html;
                },
                onBeforeRefresh: function() {
                    // console.log("brefore refresh")
                },
                onBeforeLoad: function() {
                    // console.log("brefore load")
                },
                onRefresh: function() {
                    // 刷新以后执行
                    // console.log("refreshed")
                },
                onLoad: function() {
                    // 刷新以后执行
                    // console.log("loaded")
                }
            })

        })
    </script>
</body>
</html>